<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.js"></script>
    <!-- 两者的底层都是通过lodash实现的 -->
</head>

<body>
    <input type="text" name="" id="">
    <button>+</button>
    <span>0</span>
    <button>-</button>
</body>

</html>
<script>
    // 防抖  debounce  
    // 前面所有的触发都被取消  最后一次执行在规定的时间之后才会触发
    //   也就是说连续的快速触发只会执行一次

    let input = document.querySelector('input')
    // input.oninput = function(){
    //     console.log(88)
    // }

    input.oninput = _.debounce(function () {
        console.log(88)
    }, 1000)




    // 节流   throttle
    // 在规定的时间间隔内不会重复的触发回调  只有大于这个时间后才会触发回调  ，
    // 把频繁触发变为少量触发

    let btns = document.querySelectorAll('button')[0]
    // btns.onclick = function(){
    //     console.log(888)
    // }

    btns.onclick = _.throttle(function(){
        console.log(888)
    },1000)

</script>